<template>
    <div class='talkInfo'>
        <h2>发表评论</h2>

        <hr>

        <textarea name="" v-model="msg" placeholder="请输入您的评论(最多100字)" maxlength="100">

        </textarea>

        <mt-button type='primary' size='large' @click="pushTalk">发表评论</mt-button>

        <div class="talkList">
            <div class="talkListInfo" v-for=" (item, i) in  talkList" :key="i">
                <p>
                    <span>第{{ i+1 }}楼</span>
                    <span>用户:{{ item.user_name }}</span>
                    <span>发表时间:{{ item.add_time | DateFormat }}</span>
                </p>
                <p>
                    {{ item.content }}
                </p>
            </div>
            <mt-button type='danger' size='large' plain @click="loadMore">加载更多</mt-button>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    export default{
        data() {
            return {
                msg:'',  
                pageIndex: 1, //初始化第一页数据
                talkList:[]

            }
        },

        created() {
            this.getTalk();
        },
        methods:{
            //获取评论数据
            getTalk:function(){
                this.$http.get('api/getcomments/' +this.id+'?pageindex='+this.pageIndex).then(result =>{
                    if(result.body.status === 0){
                        this.talkList = this.talkList.concat(result.body.message);
                    }else{
                        Toast({
                            message: '获取评论数据失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                    
                });
            },

            //加载更多
            loadMore:function(){
                this.pageIndex += 1;
                this.getTalk();
            },

            //发表评论
            pushTalk:function(){
                if( this.msg.trim().length <= 0){
                    Toast({
                        message: '评论内容不能为空',
                        position: 'middle',
                        duration: 2000
                    });
                     this.msg = '';
                    return;
                }

                this.$http.post('api/postcomment/'+ this.id, { content: this.msg.trim() } ).then(result => {
                    if(result.body.status === 0){
                        var talkObj = {
                            user_name: '匿名用户',
                            add_time: new Date(),
                            content: this.msg.trim(),
                        }

                        this.talkList.unshift(talkObj);
                         this.msg = '';
                    }else{
                        Toast({
                            message: '操作失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                });
            }
        },
        props:['id']
    }
</script>

<style lang="less" scoped>
    .talkInfo{
        padding: 0 4px;
        h2{
            font-size: 20px;
        }
        textarea{
            height: 100px;
            border-color:  #26a2ff;
            margin-top: 16px;
        }

        .talkList{
            margin-top: 20px;
            .talkListInfo{
                p{
                    &:nth-of-type(1){
                        display: flex;
                        -webkit-box-pack: justify;
                        justify-content: space-between;
                        -webkit-justify-content: space-between;
                        background-color: #4cd964;

                        box-align: center;
                        -webkit-box-align: center;
                        span{
                            font-size: 14px;
                            color: #fff;
                        }
                    }
                    &:nth-of-type(2){
                        text-indent: 28px
                    }
                   
                    padding: 10px 5px;
                    
                }
            }
            
        }
    }
</style>
